<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="auto">
                <div>
                    <el-menu style="height: 100vh;"
                             active-text-color="#ffd04b"
                             background-color="aliceblue"
                             default-active="/home"
                             router=true
                             class="el-menu-vertical-demo"
                             :collapse="isCollapse"
                             @open="handleOpen"
                             @close="handleClose"
                    >
                        <template v-for="val in menulist">
                            <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0 && val.meta.roles.indexOf(state.role)>=0 "
                                         :key="val.path">
                                <template #title>
                                    <SvgIcon :name="val.meta.icon"/>
                                    <span>{{ val.meta.title }}</span>
                                </template>
                                <div v-for="vvv in val.children">
                                    <el-menu-item :index="vvv.path"  v-if="val.meta.roles.indexOf(state.role)>=0 " :key="vvv.path">
                                        <SvgIcon :name="vvv.meta.icon"/>
                                        <span>{{ vvv.meta.title }}</span>
                                    </el-menu-item>
                                </div>

                            </el-sub-menu>
                            <template v-else-if="val.meta.roles.indexOf(state.role)>=0 ">
                                <el-menu-item :index="val.path" :key="val.path">
                                    <SvgIcon :name="val.meta.icon"/>
                                    <span>{{ val.meta.title }}</span>
                                </el-menu-item>
                            </template>
                        </template>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header style="background-color:aliceblue; " >
                    <div style="margin-top: 15px"  @click="isCollapse=!isCollapse">
                        <el-icon v-if="!isCollapse">
                            <Fold/>
                        </el-icon>
                        <el-icon  v-if="isCollapse">
                            <Expand/>
                        </el-icon>
                    </div>
                    <div class="userinfo">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                 <el-avatar > <el-avatar style="background: aquamarine;" :src="head" /> </el-avatar>{{ state.username }}

                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>{{ state.username }}</el-dropdown-item>
                                    <el-dropdown-item @click="cpasshad">修改密码</el-dropdown-item>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <el-divider />
                </el-header>
                <el-main style="height: 90vh">
                    <RouterView/>
                </el-main>
            </el-container>
        </el-container>
    </div>
  <ChangePas ref="Cpass" />
</template>


<script setup>
import {RouterLink, RouterView} from 'vue-router'
import router, {menulist} from '@/router/index'
import SvgIcon from '@/components/svgIcon/index.vue'
import {ref, reactive, onMounted, defineAsyncComponent} from "vue";
import { Session } from '@/api/session'
import head from "@/assets/head.jpg"
const ChangePas = defineAsyncComponent(() => import('@/components/Changepassword.vue'));
const Cpass = ref();

const isCollapse = ref(false)
const state = reactive({
    username: '',
    role:'',
});


const cpasshad = () => {
  Cpass.value.openDialog();
};


const logout = async () => {
    Session.clear()
    router.push('/login')
}
onMounted(() => {
    const user=Session.get('user')
    state.username=user.nicename
    // console.log(user.Role)
    state.role=user.Role
});

</script>


<style scoped>
.userinfo {
    position: absolute;
    right: 24px;
    top: 10px;
}
.common-layout{
    width: 100%;
    height: 100%;
}
</style>


